<script setup>
import uniSection from "../../uni_modules/uni-section/components/uni-section/uni-section.vue";
import AddressPicker from "../../components/lingdang-AddressPicker/AddressPicker.vue";
import allAddress from "../../components/lingdang-AddressPicker/AddressData.js";
import {ref} from 'vue'
import uniDatetimePicker
  from "../../uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue";
import uniDataSelect from "../../uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue";
const leaveAddress=ref('请选择家庭所在省市区/县')
const addresschange=(value)=>{
  const indexArr=value.detail.value
  const shengIndex=indexArr[0]
  const shiIndex=indexArr[1]
  const quIndex=indexArr[2]
  leaveAddress.value=allAddress[shengIndex].name+'/'+allAddress[shengIndex].children[shiIndex].name+'/'+allAddress[shengIndex].children[shiIndex].children[quIndex].name
}
const tonext15=()=>{
  //跳转到子页面
  let flag=confirm("是否确认提交")
  if(flag){
    uni.navigateTo({url:'/studens/return/chneggong'})
  }
}
const valueA = ref('');
// 选项数据
// 单选值（使用单个值而非数组）
const singleValueA= ref('');

// 选项数据（保持不变）
const rangeA = ref([
  { "value": 0, "text": "火车"},
  { "value": 1, "text": "汽车" },
  { "value": 2, "text": "高铁" },
  { "value": 3, "text": "飞机" },
  { "value": 4, "text": "高铁" }
]);
// 选择变更事件
const changeA= (eA) => {
  console.log('单选值:', eA);
  console.log("rangeA", rangeA.value);
  console.log("当前选中值", singleValueA.value);
};
</script>

<template>
<view id="jiatong">
  <uni-section  class="bk7"  title="家庭地址"  type="line" padding>
    <view class="example-body1">
      <AddressPicker class="ad" @change="addresschange" :level="3">{{leaveAddress}}</AddressPicker>
    </view>
  </uni-section>
  <uni-section  class="xq" title="详细地址"  type="line" padding>
    <view>
      <uni-easyinput   errorMessage v-model="value" focus placeholder="请输入家庭所在详细地址" @input="input"></uni-easyinput>
    </view>
  </uni-section>
  <uni-section   class="xq" title="预计到达时间"  type="line" padding>
    <view class="example-body">
      <uni-datetime-picker type="datetime" v-model="datetimesingle" @change="changeLog" />
    </view>
  </uni-section>
  <uni-section   class="xq" title="返校交通情况"  type="line" padding>
    <view class="tx">多次交通工具请分开填写</view>
  </uni-section>
  <view class="ql">
    <view class="xc">
      <view><image class="tp10" src="/static/image/xc.png"></image></view>
      <view>行程一</view>
    </view>
    <view class="xc1">
      <view><image class="tp10" src="/static/image/zt.png"></image></view>
      <view>上限添加5个</view>
    </view>
    <view></view>
  </view>
    <uni-section  class="xq" title="交通工具"  type="line" padding>
      <view class="uni-px-5 uni-pb-5">
        <!-- 单选模式的选择器 -->
        <uni-data-select v-model="singleValueA" :localdata="rangeA" @change="changeA" label="请选择交通工具"
                         mode="selectorA">{{ singleValueA }}</uni-data-select>
      </view>
    </uni-section>
    <uni-section  class="xq" title="交通信息"  type="line" padding>
      <view>
        <uni-easyinput   errorMessage v-model="value" focus placeholder="请输入航班号/动车号/车牌号" @input="input"></uni-easyinput>
      </view>
    </uni-section>
  <view class="xc">
    <view><image class="tp10" src="/static/image/xcsj.png"></image></view>
    <view>行程时间</view>
  </view>
  <uni-section   class="xq" title="开始时间"  type="line" padding>
    <view class="example-body">
      <uni-datetime-picker type="datetime" v-model="datetimesingle" @change="changeLog" />
    </view>
  </uni-section>
  <uni-section   class="xq" title="结束时间"  type="line" padding>
    <view class="example-body">
      <uni-datetime-picker type="datetime" v-model="datetimesingle" @change="changeLog" />
    </view>
  </uni-section>
  <button @click="tonext15" :disabled="disablse" type="primary" >提交申请</button>
</view>
</template>

<style scoped>
#jiatong{
width: 100%;
height: 100%;
background-color: #F0F3FA;
}
.ql{
  display: flex;
}
.xc{
  display: flex;
}
.xc1{
  display: flex;
  position: relative;
  left: 200px;
}
.tp10{
  width: 16px;
  height: 17px;
  margin: 5px 10px;
}
.tp15{
  width: 16px;
  height: 16px;
}
.bk7{
  background-color:#F0F3FA ;
}
.ad{
  background-color: white;
}
.xq{
  background-color:#F0F3FA ;
  font-weight: 400;
  font-size: 15px;
  color: #262626;
  letter-spacing: 0;
}
.tx{
  font-weight: 400;
  font-size: 12px;
  color: #A0A0A0;
  letter-spacing: 0;}
</style>